@extends('admin.common.main')

@section('css')
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
@endsection
@section('cnt')
    <div class="layui-form layuimini-form" lay-filter="example">
        @csrf
        <div class="layui-form-item">
            <label class="layui-form-label required">文章名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" id="title"  lay-verify="required"  value="{{$article->title}}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">文章描述</label>
            <div class="layui-input-block">
                <input type="text" name="desc"   lay-verify="required"  value="{{$article->desc}}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文章封面</label>
            <input type="hidden" name="pic" id="pic" value="{{$article->pic}}">
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-primary" id="cateBtn">
                        <i class="icon icon-upload3"></i>点击上传</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" style="width: 200px;height: 100px;" id="cateImage" src="{{$article->pic}}">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">文章内容</label>
            <div class="layui-input-block">
                <textarea id="remarkEditor"   name="body" >{{ $article->body }}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认修改</button>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        const  csrf = "{{csrf_token()}}";
        layui.use(['form','upload','http','layedit'], function () {
            var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                http  = layui.http,
                $ = layui.$;
            //上传
            http.uplode("cateBtn",'{{route('admin.upload.image')}}',csrf,
                function(res) {
                    if(res.code==200){
                        $('#pic').val(res.data);
                        $('#cateImage').attr('src',res.data);
                        layer.msg("上传成功",{offset:['200px','450px'],icon:6});
                    }else{
                        //如果上传失败
                        return layer.msg('上传失败');
                    }
                }
            );
            //
            //初始化编辑器
            editIndex = layedit.build('remarkEditor', {
                tool: ["strong", "italic", "underline", "del", "|", "left", "center",
                    "right", "|", "face", "link", "unlink", "code"],
                height: 300, //设置编辑器高度
            });
            //监听提交
            form.on('submit(saveBtn)', function (data) {
                //新属性赋值
                var bean = data.field;
                bean.body = layedit.getContent(editIndex);
                console.error(data,bean);
                http.httpajax('{{route('admin.article.update',['id'=>$article->id])}}', data.field,"PUT",function(res) {
                    if(res.code === 200){
                        layer.msg(res.msg,{time:1000,icon:1},function(){
                            // 关闭弹出层
                            layer.close();
                            window.parent.location.reload();//刷新父页面
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        });
                    }else{
                        layer.msg(res.msg,{time:1000,icon:2});
                    }
                });
            });
        });
    </script>
@endsection

